<template>
  <!--  <div class="inline-box" ref="board2InWidth">-->
  <div :id="componentsId" class="echartMap-line"></div>
  <!--  </div>-->

</template>

<script>
import * as echarts from "echarts";

export default {
  name: "gauge",
  props: ['componentsId', 'sizeNumber', 'optionData', 'inPage'],
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    optionData() {
      // console.log('optionData=======>>>>>:', this.optionData, this.componentsId)
      if(this.myChart){
        this.myChart.resize();
        this.myChart.setOption({
          series: [
            {
              data: [
                {
                  value: 10,
                  name: `${(this.optionData.name || this.optionData.sku) || 'temperature'}`
                }
              ]
            }
          ]
        });
      }
    },
    sizeNumber() {
      // console.log('单个组件比啊了', this.$refs.board2InWidth.offsetWidth, this.$refs.board2InWidth.offsetHeight)
      // console.log('组件更新了尺寸：', this.myChart)
      this.myChart.resize();
      // this.myChart.clear();
      // this.myChart.resize();
      // this.echartsInstance.setOption(newOption);
      // this.initChart()
    }
  },
  mounted() {
    // myChart.resize();
    // console.log('this.componentsId:', this.componentsId, this.sizeNumber)
    let n = this
    this.$nextTick(() => {
      n.initChart()
    })
  },
  methods: {
    initChart() {
      let n = this
      let chartDom = document.getElementById(this.componentsId);
      this.myChart = echarts.init(chartDom);
      // console.log('optionData:', this.optionData)
      let data_value = 10
      if(this.inPage==='dataBoard'){
        data_value = this.optionData.data  || 0
      }
      let option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            detail: {
              valueAnimation: true,
              fontSize: 18,
              formatter: '{value}',
              color: 'inherit'
            },
            pointer: {
              width: 3,
              itemStyle: {
                color: 'inherit',
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10
            },
            //表圈
            axisTick: {
              distance: 2,
              length: 4,
              lineStyle: {
                color: 'inherit',
                width: 1
              }
            },
            splitLine: {
              distance: 2,
              length: 6,
              lineStyle: {
                color: '#000',
                width: 2
              }
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [
              {
                value: data_value,
                name: `${(this.optionData.name || this.optionData.sku) || 'temperature'}`
              }
            ]
          }
        ]
      };
      if (this.inPage === 'compontents') {
        setInterval(function () {
          n.myChart.setOption({
            series: [
              {
                data: [
                  {
                    value: +(Math.random() * 100).toFixed(2),
                    name: 'Temperature'
                  }
                ]
              }
            ]
          });
        }, 2000);
      }
      this.myChart.setOption(option);
      // console.log('this.myChart', this.myChart)
      // if (this.inPage === 'preview' && index < this.keyData.length) {
      //   this.initChart(index + 1)
      // }
    }
  }
}
</script>

<style scoped>
.echartMap-line {
  height: 100%;
  width: 100%;
}

.inline-box {
  width: 100%;
  height: 100%;
}
</style>
